<template>
  <div id="player">
    <div v-if="tableData !== ''">
      <div class="fl courseName">
        <el-form :inline="true" :model="form" class="fl">
          <el-form-item label="关键字">
            <el-input clearable v-model="form.info" placeholder="请输入选手账号/姓名"></el-input>
          </el-form-item>
          <el-form-item label="状态 :">
            <el-select clearable v-model="form.status" placeholder="请选择状态">
              <el-option label="正常" :value="0"></el-option>
              <el-option label="延时" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <button @click="search" class="button-style">搜 索</button>
      </div>
      <div class="btn-group fr">
        <el-form :inline="true">
          <el-form-item>
            <div class="button-style" @click="add">&emsp;添 加&emsp;</div>
          </el-form-item>
          <el-form-item>
            <div class="button-style" @click="deleteFn">批量删除</div>
          </el-form-item>
          <el-form-item>
            <el-upload class="avatar-uploader" accept=".xls,.xlsx"
              :action="`/tes/apply/apply-tea/data-import/${courseId}`" :show-file-list="false"
              :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :before-upload="beforeAvatarUpload">
              <div class="button-style">批量导入</div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <a href="/tes/tempfiles/选手导入-个人.xlsx">模板下载</a>
          </el-form-item>

          <el-form-item>
            <div @click="downloadFile" class="downloadfile">
              <i class="">数据下载<b class="iconfont icon-tubiaozhizuo-"></b></i>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="clear"></div>
      <div>已报名选手：{{ pNum.peopleCount }}</div>
      <el-table class="chapter-info-table" :data="tableData" style="width: 100%" tooltip-effect="dark"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="选手姓名"></el-table-column>
        <el-table-column prop="number" label="编号"></el-table-column>
        <el-table-column prop="userNumber" label="账号"></el-table-column>
        <el-table-column prop="major" label="专业"></el-table-column>
        <el-table-column prop="className" label="班级"></el-table-column>
        <el-table-column prop="applyTime" label="报名时间"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">正常</div>
            <div v-if="scope.row.status == 1">延时</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="getInfo(scope.row.number)" type="text" size="small">修改</el-button>
            <el-button @click="showDelayed(scope.row)" type="text" size="small">竞赛延时</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-size="pagesize" background layout="prev, pager, next" :total="totalCount">
      </el-pagination>
    </div>
    <el-dialog :close-on-click-modal="false" :title="dialogAddTitle" :visible.sync="dialogAdd" width="600px"
      @close="closeDialogAdd" class="add-player">
      <h3 style="text-align: center; margin-bottom: 20px">默认初始密码：000000</h3>
      <el-form class="form-add" ref="form" label-width="100px" :model="formAdd">
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="formAdd.name" maxlength="10" show-word-limit placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="name">
          <el-input @keyup.native="getUserInfo(formAdd.telephoneNumber)" v-model="formAdd.telephoneNumber"
            maxlength="11" show-word-limit placeholder="请输入手机号"></el-input>
          注：手机号将作为您的账号使用
        </el-form-item>
        <el-form-item label="专业：" prop="name">
          <el-input v-model="formAdd.major" maxlength="50" show-word-limit placeholder="请输入专业"></el-input>
        </el-form-item>
        <el-form-item label="班级：" prop="name">
          <el-input v-model="formAdd.className" maxlength="50" show-word-limit placeholder="请输入班级"></el-input>
        </el-form-item>
      </el-form>
      <div class="footer" style="text-align: center">
        <button v-if="isUpdate" class="button-style saveBtn" @click="onUpdate">
          修 改
        </button>
        <button v-else class="button-style saveBtn" @click="onAdd">确 认</button>
      </div>
    </el-dialog>
    <!-- 延时弹框 -->
    <el-dialog :close-on-click-modal="false" title="延时" :visible.sync="dialogTime" width="600px">
      <el-form class="form-add" ref="form" label-width="100px" :model="formAdd">
        <el-form-item label="延时时间：" prop="name">
          <el-input-number v-model="formDelayed.minute" :min="0" :max="999" step-strictly controls-position="right">
          </el-input-number>
          分钟
        </el-form-item>
      </el-form>
      <div class="footer" style="text-align: center">
        <button class="button-style saveBtn" @click="updateDelayed">确 认</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const _ = require("lodash");
export default {
  data() {
    return {
      dialogAddTitle: "",
      isUpdate: false,
      formDelayed: {
        minute: 0,
        number: "",
      },
      courseId: "",
      //搜索
      form: {
        info: "",
        status: "",
        pageNumber: 1,
        pageSize: 10,
      },
      pagesize: 10,
      currentPage: 1,
      totalCount: 0,
      //添加选手
      formAdd: {
        className: "",
        major: "",
        name: "",
        telephoneNumber: "",
        number: "",
      },
      tableData: [],
      dialogAdd: false,
      dialogTime: false,
      multipleSelection: [],
      fileList: [],
      pNum: {
        groupCount: 0,
        peopleCount: 0,
      },
    };
  },
  created() {
    this.courseId = this.$localstorage.getLocalStorage("setCourseId");
    this.init();
  },
  methods: {
    init() {
      this.getList();
      this.getNum();
    },

    //通过手机号获取用户信息
    getUserInfo(telephoneNumber) {
      if (telephoneNumber.length == 11) {
        this.$http
          .get(`/tes/unauthorized/userInfo?userNumber=${telephoneNumber}`)
          .then((response) => {
            let res = response.data;
            if (res.code == "200") {
              if (res.data) {
                this.formAdd.name = res.data.name;
                this.formAdd.major = res.data.major;
                this.formAdd.className = res.data.className;
              }
              console.log(res.data, 123);
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.$message.error(res.message);
            console.log(err);
          });
      }
    },
    //获取选手和队伍人数
    getNum() {
      this.$http
        .post(`/tes/apply/apply-tea/player-info/${this.courseId}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.pNum = res.data;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //上传成功
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.$message.success(res.message);
        this.init();
      } else {
        this.$message.error(res.message);
      }
    },
    //上传失败
    handleAvatarError(res) {
      // this.$message.error(res.message);
    },
    //上传之前校验
    beforeAvatarUpload(file) {
      // 获取到文件的后缀以便于判断文件类型
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      // 判断文件类型
      if (extension !== "xlsx" && extension !== "xls") {
        this.$message.warning("只能上传后缀是.xlsx或者.xls的文件");
        return;
      }
    },
    search() {
      this.form.pageNumber = 1;
      this.init();
    },
    //延时弹框
    showDelayed(row) {
      this.formDelayed.minute = row.delayedTime;
      this.formDelayed.number = row.number;
      this.dialogTime = true;
    },
    //添加关闭清空
    closeDialogAdd() {
      this.formAdd = {
        className: "",
        major: "",
        name: "",
        telephoneNumber: "",
        number: "",
      };
    },

    //删除
    deleteFn(number) {
      //console.log(this.multipleSelection)
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要删除的内容",
          type: "warning",
        });
        return;
      }
      this.$confirm("是否删除选中?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post(
              `/tes/apply/apply-tea/delete-batch/${this.courseId}`,
              this.multipleSelection
            )
            .then(
              (response) => {
                let res = response.data;
                if (res.code == "200") {
                  this.$message({
                    message: "删除成功",
                    type: "success",
                  });
                  this.form.pageNumber = 1;
                  this.currentPage = 1;
                  this.init();
                } else {
                  this.$message.error(res.message);
                }
              },
              (err) => {
                console.log("err");
              }
            );
          //this.dialogTips = true
        })
        .catch(() => { });
    },
    //修改回显
    getInfo(number) {
      this.$http
        .get(`/tes/apply/apply-tea/info-person?number=${number}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.formAdd = res.data;
            this.formAdd.number = number;
            this.dialogAddTitle = "修改选手";
            this.isUpdate = true;
            this.dialogAdd = true;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //延时修改
    updateDelayed() {
      this.$http
        .post(`/tes/apply/apply-tea/delayed`, this.formDelayed)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.dialogTime = false;
            this.init();
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取列表
    getList() {
      this.$http
        .post(`/tes/apply/apply-tea/list-person/${this.courseId}`, this.form)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            console.log(res.data, 2223);
            this.tableData = res.data.records;
            this.totalCount = res.data.total;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改提交
    onUpdate() {
      this.$http
        .post(`/tes/apply/apply-tea/update-person/${this.courseId}`, this.formAdd)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message.success(res.message);
            this.dialogAdd = false;
            this.init();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加提交
    onAdd() {
      this.$http
        .post(`/tes/apply/apply-tea/save-person/${this.courseId}`, this.formAdd)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message.success(res.message);
            this.dialogAdd = false;
            this.init();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //分页
    handleSizeChange(size) {
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      this.form.pageNumber = currentPage;
      this.currentPage = currentPage;
      this.init();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.number);
      console.log(this.multipleSelection);
    },
    add() {
      this.dialogAddTitle = "添加选手";
      this.isUpdate = false;
      this.dialogAdd = true;
    },
    //数据下载
    downloadFile() {
      let self = this;
      self.$http
        .post(`/tes/apply/apply-tea/data-download/${this.courseId}`, this.form, {
          responseType: "blob",
        })
        .then((response) => {
          let contentType = response.headers["content-type"];
          let blob = new Blob([response.data], {
            type: response.headers["content-disposition"],
          });
          let url = window.URL.createObjectURL(blob);
          //let fileName = response.headers['content-disposition'].split(";")[1].split("filename=")[1];
          let fileName = `数据下载.xls`;
          let downloadElement = document.createElement("a");
          downloadElement.style.display = "none";
          downloadElement.href = url;
          downloadElement.download = fileName; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(url);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss">
#player {
  .el-input-number {
    .el-input {
      width: 100%;

      input {
        width: 100%;
      }
    }

    .el-input-number__increase {
      top: 4px;
      line-height: 15px;
    }

    .el-input-number__decrease {
      bottom: 4px;
      line-height: 15px;
    }
  }

  .form-add {
    .el-input {
      width: auto;

      .el-input__count-inner {
        background: none;
      }
    }
  }
}

.filter-wraper {
  .input-wraper {
    margin-top: 20px;

    .el-input__inner {
      width: auto;
    }
  }
}

.add-player {
  .el-input__inner {
    width: auto;
    padding-right: 47px;
  }
}

.el-tooltip__popper {
  max-width: 30%;
  line-height: 22px;
}

.chapter-info-table .el-switch__core {
  width: 28px;
  height: 16px;
}

.chapter-info-table .el-switch {
  margin-left: 15px;
}

.chapter-info-table .el-switch.is-checked .el-switch__core::after {
  margin-left: -13px;
}

.chapter-info-table .el-switch__core:after {
  width: 12px;
  height: 12px;
}
</style>
<style scoped>
.imgPost {
  vertical-align: inherit;
  position: absolute;
  right: 17px;
  color: rgb(2, 170, 255);
  font-size: 18px;
  padding-top: 5px;
}

.el-button--small:hover {
  color: #1277eb;
}

.el-tree>>>.el-tree-node {
  margin: 6px 0;
}

.el-form-item>>>.el-input__inner {
  width: 200px;
  height: 32px;
  border-radius: 4px;
}

.el-form>>>.el-textarea__inner {
  height: 200px;
  width: 350px;
  resize: none;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-form-item>>>.el-form-item__content {
  height: auto;
}

.block::-webkit-scrollbar {
  width: 2px;
}

.block::-webkit-scrollbar-thumb {
  background: #dededd;
  border-radius: 50px;
}

.chapterTitle {
  width: 390px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.custom-tree-node {
  padding-top: 10px;
}
</style>
<style lang="scss" scoped>
@import "./../../../styles/ypublic.scss";

.downloadfile {
  color: #1277eb;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
}

.jx-content {
  width: 1200px;
  margin: 20px auto;

  .courseName {
    font-size: 18px;
  }

  #topic-models {
    padding: 200px 0;

    .button-center {
      text-align: center;

      .button-style {
        text-align: center;
        height: 48px;
        line-height: 48px;
        border-radius: 48px;
        padding: 0 106px;
        margin: 10px;
      }
    }
  }

  .navBox {
    .reportTemplate {
      padding-bottom: 10px;
      margin-left: 190px;
      cursor: pointer;
    }

    .testTemplate {
      padding-bottom: 10px;
      margin-left: 40px;
      cursor: pointer;
    }

    .templateCheck {
      border-bottom: 2px solid $yBlue;
      color: $yBlue;
      cursor: pointer;
    }
  }

  .block {
    margin: 20px 0;
    overflow-y: scroll;
    height: 483px;
  }

  .saveBtn {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
